<template>
    <div
        class="el-select-dropdown"
        :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
        :style="{ minWidth: minWidth }">
        <slot/>
    </div>
</template>

<script type="text/babel">
//  import Popper from 'element-ui/src/utils/vue-popper';

export default {
    name: 'ElSelectDropdown',

    componentName: 'ElSelectDropdown',

    //    mixins: [Popper],

    props: {
        placement: {
            type: String,
            default: 'bottom-start',
        },

        boundariesPadding: {
            type: Number,
            default: 0,
        },

        popperOptions: {
            type: Object,
            default() {
                return {
                    forceAbsolute: true,
                    gpuAcceleration: false,
                };
            },
        },
    },

    data() {
        return {
            minWidth: '',
        };
    },

    computed: {
        popperClass() {
            return this.$parent.popperClass;
        },
    },

    watch: {
        '$parent.inputWidth'() {
            this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
        },
    },

    mounted() {
        this.referenceElm = this.$parent.$refs.reference.$el;
        this.$parent.popperElm = this.popperElm = this.$el;
        /* this.$on('updatePopper', () => {
              if (this.$parent.visible) this.updatePopper();
            });
            this.$on('destroyPopper', this.destroyPopper); */
    },
};
</script>
